<template>
    <div class="box">
        {{ a }}
    </div>
    <div @click="a++">+</div>
    <div>
        {{ moment().format('YYYY-MM-DD') }}
    </div>

    <h1>{{ $t('welcome') }}</h1>

    <!-- 语言切换组件 -->
    <LanguageSwitcher />

    <div class="profile">
        <p>{{ $t('profile.name', { name: userName }) }}</p>
        <p>{{ $t('profile.age', { count: userAge }) }}</p>
    </div>

    <div class="actions">
        <button>{{ $t('buttons.submit') }}</button>
        <button>{{ $t('buttons.cancel') }}</button>
    </div>

    <div class="formats">
        <p>长日期: {{ $d(currentDate, timeLength) }}</p>
        <button @click="() => {
            timeLength = timeLength === 'short' ? 'long' : 'short'
        }">修改日期格式</button>
        <p>金额: {{ $n(1234.56, 'currency') }}</p>
    </div>
    <!-- 匿名插槽 -->
    <ChildComponent name="child1">
        <div>
            <h1>匿名插槽 </h1>
        </div>
    </ChildComponent>
    <!-- 具名插槽 -->
    <ChildComponent2 class="child2">
        <template #header>
            <h1>具名插槽头部</h1>
        </template>
        <p>这是普通的内容</p>
        <template #footer>
            <p>具名插槽底部</p>
        </template>
    </ChildComponent2>

    <ChildComponent3>

        <template v-slot="slopData">
            <div class="user-info">
                <h2>{{ slopData.user.name }}</h2>
                <p>职业: {{ slopData.user.occupation }}</p>
                <p>年龄: {{ slopData.user.age }} 岁</p>
            </div>
        </template>

        <template #postMes="postMesDate">
            <div>
                <h3>社交链接</h3>
                <ul>
                    <li v-for="link in postMesDate.postMes" :key="link.name">
                        <a :href="link.url" target="_blank">{{ link.name }}</a>
                    </li>
                </ul>
            </div>
        </template>



    </ChildComponent3>



</template>
<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './components/ChildComponent.vue';
import ChildComponent2 from './components/ChildComponent2.vue';
import ChildComponent3 from './components/ChildComponent3.vue';
import LanguageSwitcher from './components/LanguageSwitcher.vue';
import moment from "moment";

const a = ref<number>(111)

const userName = ref('John Doe');
const userAge = ref(30);
const currentDate = new Date();
const timeLength = ref("short")

</script>

<style lang="scss">
.app {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

h1 {
    color: #2c3e50;
}

.profile {
    margin: 20px 0;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 8px;
}

.actions {
    display: flex;
    gap: 10px;
    margin: 20px 0;
}

button {
    padding: 10px 20px;
    background-color: #42b983;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #3aa876;
}

.formats {
    margin-top: 30px;
    padding: 15px;
    background-color: #f0f8ff;
    border-radius: 8px;
}
</style>